import {
    Edit,
    Select,
    Switch,
    Calendar,
    Timer,
    Document,
    Collection,
    Reading,
    Picture,
    Upload,
    Link,
    Rank,
    List,
    Grid
} from '@element-plus/icons-vue'
import type { Component } from 'vue'

export interface ComponentItem {
    type: string
    label: string
    component: string
    icon: Component
    props?: Record<string, any>
}

export const COMPONENT_LIST: ComponentItem[] = [
    { type: 'input', label: '输入框', component: 'el-input', icon: Edit },
    { type: 'textarea', label: '文本域', component: 'el-input', icon: Document, props: { type: 'textarea' } },
    { type: 'number', label: '数字框', component: 'el-input-number', icon: Rank },
    { type: 'select', label: '下拉框', component: 'el-select', icon: Select },
    { type: 'date', label: '日期框', component: 'el-date-picker', icon: Calendar },
    { type: 'time', label: '时间框', component: 'el-time-picker', icon: Timer },
    { type: 'datetime', label: '日期时间', component: 'el-date-picker', icon: Timer, props: { type: 'datetime' } },
    { type: 'switch', label: '开关', component: 'el-switch', icon: Switch },
    { type: 'radio', label: '单选框组', component: 'el-radio-group', icon: List },
    { type: 'checkbox', label: '多选框组', component: 'el-checkbox-group', icon: Collection },
    { type: 'cascader', label: '级联选择', component: 'el-cascader', icon: Grid },
    { type: 'slider', label: '滑块', component: 'el-slider', icon: Reading },
    { type: 'rate', label: '评分', component: 'el-rate', icon: Rank },
    { type: 'color', label: '颜色选择', component: 'el-color-picker', icon: Picture },
    { type: 'upload', label: '上传', component: 'el-upload', icon: Upload },
    { type: 'link', label: '链接', component: 'el-link', icon: Link }
]

// 组件属性配置
export const COMPONENT_PROPS_CONFIG = {
    input: {
        placeholder: '请输入',
        clearable: true,
        maxlength: undefined,
        showWordLimit: false,
    },
    select: {
        placeholder: '请选择',
        clearable: true,
        multiple: false,
    },
    date: {
        placeholder: '请选择日期',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
    },
    datetime: {
        placeholder: '请选择日期时间',
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
    },
    // ... 可以继续添加其他组件的默认属性
} 